<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位与浮动</title>
    <style>
        div {
             width: 1000px;
             height: 100px;
             margin: 10px;
             background-color: darkkhaki;
             /*float: left;*/
             /*position: static;*/
         }

        #div1,#div2,#div3{
            width: 205px;
            height: 200px;
            background-color: darksalmon;
            float: left;
            background: url("div1.jpg");
            
         }
        #div11{
            top: 50px;
            position:absolute;
            width: 1000px;
            height: 800px;
            background-color: powderblue;

        }
        #div12{
            width: 650px;
            height: 400px;
            background: url("div2.jpg");
            overflow: auto;
            

        }
        #div4{
            width: 250px;
            height: 600px;
            top: 0px;
            right: 50px;
            position:absolute;
            background-color:white;
            overflow: scroll;
            background: url("div3.jpg");

        }
        #div5,#div6,#div7,#div8{
            float: inherit;
            clear: both;
        }

    </style>
</head>
<body>

</body>
<div style="background-color: darksalmon">导航栏</div>
<div id="div11">

    <div id="div1">栏目1------更多</div>
    <div id="div2">栏目2------更多</div>
    <div id="div3">栏目3------更多</div>

    <div id="div4">
        <h3>固定栏目</h3>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
        <br><p>这里有很多文本</p>
    </div>

    <div id="div12">
        <div id="div5">栏目5------更多</div>
        <div id="div6">栏目6------更多</div>
        <div id="div7">栏目7------更多</div>
        <div id="div8">栏目8------更多</div>
        <div id="div9">栏目9------更多</div>
    </div>

</div>

</html>
